<template>
	<view class="haoy">
		<u-navbar :border-bottom="false" title-size="35" title="好友列表">
			<view slot="left">left</view>
			<view slot="right" class="right-icon" @click="goHaoy">
				<image src="@/static/IM/tianj.png"></image>
			</view>
		</u-navbar>
		<view class="haoy-search">
			<u-search placeholder="输入名称" v-model="keyword" :show-action="false" shape="square" bg-color="#F6F6F6"
				@search="searEv"></u-search>
		</view>
		<ul>
			<li v-for="(item,index) in list" :key="index" @click="handleRoute(item.profile.userID)">
				<view class="cont">
					<image :src="item.profile.avatar"></image>
					<view>
						<text>{{item.profile.nick}}</text>
						<text>ID：{{item.profile.userID}}</text>
					</view>
				</view>
				<view class="del" @click.stop="del(item)">删除</view>
			</li>
		</ul>
		<u-popup v-model="show" mode="center" width="690" height="500">
			<view class="pop">
				<view class="pop-title">好友ID</view>
				<view class="pop-input">
					<text>ID:</text>
					<input type="text" v-model="to1" placeholder="请输入好友ID">
				</view>
				<view class="pop-btn" @click="init">确定</view>
			</view>
		</u-popup>
		<u-modal v-model="is_show" :show-cancel-button="true" :content="content" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索列表
				keyword: '',
				list: [],
				// 弹框
				show: false,
				to1: '',
				is_show:false,
				item:{},//要删除的好友数据
				content: '是否要删除该好友'
			};
		},
		onLoad() {
			this.haoyList()
		},
		methods: {
			searEv() {
				if(this.keyword==''){
					this.haoyList()
				}else{
					this.list = this.list.filter(item => item.profile.nick == this.keyword)
				}
				
			},
			goHaoy() {
				this.show = !this.show
			},
			init() {
				let self = this
				uni.$TUIKit.addFriend({
						to: self.to1,
						source: 'AddSource_Type_Web',
						groupName: '好友',
						wording: '我是 user0',
						type: uni.$TUIKitTIM.TYPES.SNS_ADD_TYPE_BOTH,
					}).then(imResponse => {
						if (imResponse.data.code == 0) {
							uni.showToast({
								title: "添加成功",
								icon: "none",
								duration: 2000,
							});
						}
						setTimeout(() => {
							// self.gengx()
							self.haoyList()
						}, 1000)

						self.show = false
					})
					.catch(err => {
						self.show = false
						uni.showToast({
							title: "用户不存在或已添加",
							icon: "none",
							duration: 2000,
						});
					})
			},
			haoyList() {
				uni.$TUIKit.getFriendList().then(imResponse => {
					this.setData({
						list: imResponse.data
					})
					console.log(imResponse.data, '好友列表')
				});
			},
			handleRoute(idre) {
				let id = 'C2C' + idre;
				const url = `/pages/subpackage/IM/TUI-Chat/chat?conversationID=${id}`;
				uni.navigateTo({
					url
				});
			},
			// 删除
			del(item){
				this.item=item
				this.is_show=true
			},
			confirm(){
				let arr=[]
				arr.push(this.item.userID)
				uni.$TUIKit.deleteFriend({
					userIDList:arr,
					type:uni.$TUIKitTIM.TYPES.SNS_DELETE_TYPE_BOTH,
				}).then(imResponse => {
					this.haoyList()
				});
			}
		}
	}
</script>

<style lang="scss">
	.haoy {
		background-color: #f3f3f3;

		.right-icon {
			>image {
				width: 40rpx !important;
				height: 40rpx !important;
				margin-right: 30rpx;
			}
		}

		.haoy-search {
			padding: 0 30rpx 10rpx 30rpx;
			background-color: #fff;
		}

		>ul {
			margin-top: 20rpx;

			>li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				padding: 20rpx 30rpx;
				background-color: #fff;
				border-bottom: 1rpx solid #f3f3f3;

				.cont {
					display: flex;
					align-items: center;
					>image {
						width: 82rpx;
						height: 82rpx;
						margin-right: 20rpx;
					}

					>view {
						>text {
							display: block;
						}
					}
				}

				.del {
					margin-right: 0;
				}
			}

			>li:last-child {
				border: none
			}
		}

		.pop {
			padding: 20rpx;
			box-sizing: border-box;

			.pop-title {
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-Medium;
			}

			.pop-input {
				display: flex;
				align-items: center;
				margin: 120rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E5E5E5;

				>input {
					width: 600rpx;
					padding: 10rpx;
				}
			}

			.pop-btn {
				margin: 0 auto;
				width: 320rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				color: #ffffff;
				background: linear-gradient(to right, #B07412, #E3BA5B);
				border-radius: 15rpx;
			}

			.pop-btn:active {
				background: linear-gradient(to right, #E3BA5B, #B07412);
			}
		}
	}
</style>